<template>
  <div>
    <!-- <van-button class="m-add" type="warning" block @click="addMoney">添加成交</van-button> -->
    <div style="display: flex;">
      <div style="margin-left: 16px;"><img src="@/assets/images/keeper-c-head.png" width="54" height="54"></div>
      <div style="margin-left: 12px;margin-bottom: 6px;">
        <div style="font-size: 18px; margin-bottom: 10px;">你好,{{ name }}</div>
        <div style="background-color: #8A80FF;border-radius: 4px;color: #fff;font-size: 10px;width: 163px;height: 18px;justify-content: center;align-items: center;display: flex;">{{ salon.sname }}</div>
      </div>
      <div style="margin: 14px 16px 0 auto;text-align: center;">
        <div style="color: #333333;font-size: 12px;">本月积分：95</div>
        <div style="width: 104px;height: 23px;border-radius: 8px;background-color: rgba(255, 255, 255, 0.50);display: flex;align-items: center;justify-content: center;">
          <van-rate
            v-model="keeper.star"
            :size="15"
            color="#ffd21e"
            void-icon="star"
            void-color="#eee"
            :readonly="true"
          />
        </div>
      </div>
    </div>
    <div style="width: 100%;padding: 8px 16px 16px 16px;">
      <div style="width: 100%;height: 94px;background-color: #fff;border-radius: 12px;display: flex;justify-content: space-between;">
        <div style="width: 108px;height: 100%;display: flex;align-items: center;justify-content: center;">
          <div style="background-color: #CCE7FF;width: 76px;height: 76px;border-radius: 100%;display: flex;align-items: center;justify-content: center;">
            <van-circle
              v-model="rate"
              size="72px"
              :stroke-width="80"
              :text="cptRate"
              style="position: absolute;z-index: 2;"
            />
            <div style="position: absolute;z-index: 1;background-color: rgba(255, 255, 255, 0.80);width: 56px;height: 56px;border-radius: 100%;"></div>
          </div>
        </div>
        <div style="flex: 1;height: 100%;">
          <div style="width: 113px;height: 18px;background-color: #E2F1FF;margin-left: auto;border-radius: 0 12px 0 12px;display: flex;align-items: center;justify-content: center;">
            <div style="font-size: 12px; color: #237EFF;">{{ currentDate }} {{ weekDay }}</div>
          </div>
          <div style="width: 100%;height: 76px;display: flex;justify-content: space-between;">
            <div>
              <div style="margin-bottom: 12px;display: flex;align-items: center;">
                <span style="font-size: 10px;color: #666666;">本月计划(元)</span><span style="font-size: 20px;color: #666666;font-weight: bold;margin-left: 10px;">{{ keeper.moneyPlan }}￥</span>
              </div>
              <div style="display: flex;align-items: center;">
                <span style="font-size: 10px;color: #666666;">本月实际(元)</span><span style="font-size: 20px;color: #666666;font-weight: bold;margin-left: 10px;">{{ keeper.money }}￥</span>
              </div>
            </div>
            <div style="width: 88px;height: 24px;margin: auto 8px 8px 0;border-radius: 4px;border: 1px solid #237EFF;color: #237EFF;font-size: 14px;display: flex;align-items: center;justify-content: center;">
              查看记录
            </div>
          </div>
        </div>
      </div>
    </div>
    <div style="font-size: 16px;color: #237EFF;font-weight:600;margin: 0 0 0 16px;">全部流水</div>
    <div style="width: 42px;height: 6px;background-image: linear-gradient(to right, #237EFF, #d4e4fa);
      margin: -6px 0 12px 16px;" />
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多数据了"
      @load="onLoad"
    >
      <div v-for="item in list" :key="item.id"
        style="width: 100%;height: 113px;padding: 0 16px 12px 16px;"
      >
        <div style="width: 100%;background-color: #fff;height: 100%;border-radius: 12px;padding: 12px;">
          <van-row style="text-align: center;font-size: 12px;color: #999999;margin-bottom: 12px;">
            <van-col span="5">顾客</van-col>
            <van-col span="3">编号</van-col>
            <van-col span="11">时间</van-col>
            <van-col span="5">品项</van-col>
          </van-row>
          <van-row style="text-align: center;font-size: 14px;color: #333333;">
            <van-col span="5">{{ item.cname }}</van-col>
            <van-col span="3"></van-col>
            <van-col span="11">{{ item.createTime }}</van-col>
            <van-col span="5">{{ item.item }}</van-col>
          </van-row>
          <van-divider />
          <van-row style="text-align: center">
            <van-col span="12" style="font-size: 12px;color: #999999;">成交金额</van-col>
            <van-col span="12" style="font-size: 14px;color: #E10000;">{{ item.money }}元</van-col>
          </van-row>
        </div>
        <!-- <div style="color: rgba(69, 90, 100, 0.6)">
          {{ item.createTime }}
        </div>
        <van-row class="m-consumer" style="text-align: center">
          <van-col span="4">{{ item.cname }}</van-col>
          <van-col span="16">{{ item.item }}</van-col>
          <van-col span="4" style="color: red">{{ item.money }}元</van-col>
        </van-row>
        <div>
          <span style="color: rgba(69, 90, 100, 0.6)">分析：</span
          >{{ item.analysis }}
        </div> -->
      </div>
    </van-list>
    <!-- <van-popup v-model="show" :style="{ height: '24%', width: '100%' }">
      <van-form @submit="onSubmit" label-width="56px">
        <van-field
          v-model="newDeal.type"
          name="品项"
          label="品项"
          placeholder="品项"
        />
        <van-field
          v-model="newDeal.money"
          name="成交价"
          label="成交价"
          placeholder="成交价"
        />
        <van-field
          v-model="newDeal.analysis"
          name="成交分析"
          label="成交分析"
          placeholder="成交分析"
        />
        <div style="margin: 16px">
          <van-button round block type="info" native-type="submit"
            >提交</van-button
          >
        </div>
      </van-form>
    </van-popup> -->
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import Row from 'vant/lib/row'
import Col from 'vant/lib/col'
import 'vant/lib/row/style'
import 'vant/lib/col/style'
import List from 'vant/lib/list'
import 'vant/lib/list/style'
import Tag from 'vant/lib/tag'
import 'vant/lib/tag/style'
import Popup from 'vant/lib/popup'
import 'vant/lib/popup/style'
import CellGroup from 'vant/lib/cell-group'
import 'vant/lib/cell-group/style'
import Button from 'vant/lib/button'
import 'vant/lib/button/style'
import Field from 'vant/lib/field'
import 'vant/lib/field/style'
import Form from 'vant/lib/form'
import 'vant/lib/form/style'
import { getDealsBykid } from '@/api/ym'
import dayjs from 'dayjs'
import Rate from 'vant/lib/rate'
import 'vant/lib/rate/style'
import Circle from 'vant/lib/circle'
import 'vant/lib/circle/style'
import { getAdminById } from '@/api/admin'
import Divider from 'vant/lib/divider'
import 'vant/lib/divider/style'

export default {
  components: {
    [Divider.name]: Divider,
    [Circle.name]: Circle,
    [Rate.name]: Rate,
    [List.name]: List,
    [Row.name]: Row,
    [Col.name]: Col,
    [Tag.name]: Tag,
    [Popup.name]: Popup,
    [CellGroup.name]: CellGroup,
    [Button.name]: Button,
    [Field.name]: Field,
    [Form.name]: Form
  },
  props: {
    salon: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  data () {
    return {
      rate: 0,
      currentDate: dayjs().format('YYYY-MM-DD'),
      callbackValue: '',
      show: false,
      list: [],
      loading: false,
      finished: false,
      keeper: {
        star: 0,
        money: 0,
        moneyPlan: 0
      },
      newDeal: {
        cid: 1,
        type: '',
        money: '',
        analysis: ''
      }
    }
  },
  computed: {
    ...mapGetters(['openId', 'name', 'id']),
    weekDay: function() {
      let days = ["星期天", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
      let today = new Date();
      let weekday = today.getDay();
      return days[weekday];
    },
    cptRate() {
      return this.rate > 100 ? '100%' : this.rate + '%'
    }
  },
  created () {
    getAdminById(this.id).then(res => {
      this.keeper = res.data.data
      this.rate = ((this.keeper.money * 100) / this.keeper.moneyPlan) | 0
    })
  },
  methods: {
    onLoad () {
      this.loading = false
      getDealsBykid(this.id).then(res => {
        this.list = res.data.data
        this.finished = true
      })
      this.list = [
        {
          consumer: '王总',
          type: '双眼皮手术',
          cdate: '2024/01/29',
          money: '20000￥',
          analysis: '相信风水'
        },
        {
          consumer: '赵总',
          type: '整形外科手术',
          cdate: '2024/01/27',
          money: '200000￥',
          analysis: '很有钱'
        },
        {
          consumer: '钱总',
          type: '玻尿酸',
          cdate: '2024/01/25',
          money: '1000￥',
          analysis: '老顾客'
        }
      ]


    },
    addMoney () {
      this.show = true
    },
    onSubmit () {
      this.show = false
    }
  }
}
</script>
<style lang="scss">
.van-circle__text {
  font-size: 40px; /* 设置你想要的字体大小 */
  color: #237EFF;
}
.van-divider--hairline {
  margin: 16px 0;
}
</style>
<style lang="scss" scoped>
.m-cost {
  background-color: #fff;
  font-size: 26px;
  margin-bottom: 5px;
  padding: 0 10px;
  line-height: 60px;
}
.m-current {
  background-color: #fff;
  line-height: 30px;
  font-size: 20px;
  color: rgb(184, 184, 184);
  text-align: center;
}
</style>
